<template>
  <li class="item-container">
    <div class="item">
      <div class="item-main">
        <div class="operation-page">
          <span class="operate-checkbox" v-if="props.authorityManage">
            <!-- <el-checkbox /> -->
          </span>
          <span class="operate-button-group">
            <button @click="onEditor()">编辑</button>
            <button @click="onPreview()">预览</button>
            <button @click="onShareScreen()">分享</button>
          </span>
          <span class="operate-icon-group">
            <el-icon
              title="复制"
              v-if="props.authorityManage"
              @click="copyCommand"
              ><DocumentCopy
            /></el-icon>
            <el-icon
              title="删除"
              v-if="props.authorityManage"
              @click="deleteDialogVisible = true"
              ><Delete
            /></el-icon>
          </span>
        </div>
      </div>
      <div class="item-description">
        <el-icon size="20px" style="padding: 15px; color: blue"
          ><PictureRounded
        /></el-icon>
        <span class="item-description-info">
          <div class="item-description-info--name">
            <p v-show="!editName" class="showName" @click="onEditName('start')">
              {{ pageName }}
            </p>
            <span v-show="editName"
              ><input
                ref="nameInput"
                class="inputName"
                v-model="pageName"
                @keyup.enter="onEditName('end')"
            /></span>
          </div>
          <div class="item-description-info--date">{{ lastModifiedDate }}</div>
        </span>
      </div>
    </div>

    <el-dialog
      v-model="deleteDialogVisible"
      title="删除地球场景"
      width="500"
      align-center
    >
      <span>确定要删除该地球场景吗?</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </li>
</template>

<script lang="ts" setup>
import {
  ref,
  toRefs,
  computed,
  defineProps,
  getCurrentInstance,
  ComponentInternalInstance,
} from "vue";
import { ElMessage } from "element-plus";

import { useRouter } from "vue-router";

let { proxy } = getCurrentInstance() as ComponentInternalInstance;
import apiPage from "@/api/page";
import { Message } from "earthsdk-ui";
import Clipboard from "clipboard";

const router = useRouter();

const props = defineProps({
  des: Object,
  authorityManage: Boolean,
});

const deleteDialogVisible = ref(false);

//使用父组件传递过来的值
let { des } = toRefs(props);
const pageName = ref(des?.value?.displayName);
const oldname = ref();
const editName = ref(false);

const nameInput = ref(null);

let lastModifiedDate = computed(() => {
  const date = new Date(des?.value?.lastModifiedDate);
  return `上次修改时间 ${date.getFullYear()}.${
    date.getMonth() + 1
  }.${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
});

const onEditor = async () => {
  window.selectedPageInfo = des?.value;
  // router.push({
  //   path: "/editor",
  //   query: {
  //     name: des?.value?.name,
  //   },
  // });
  //#region 新开标签页面
  window.open(`./#/editor?name=${des?.value?.name}`, "_blank");
  //#endregion
};

const onPreview = async () => {
  // router.push({
  //   path: "/preview",
  //   query: {
  //     name: des?.value?.name,
  //   },
  // });

  //#region 新开标签页面
  window.open(`./#/preview?name=${des?.value?.name}`, "_blank");
  //#endregion
};

const copyCommand = async () => {
  // 获取当前page信息
  const res: any = await apiPage.copyPage({
    name: des?.value?.name,
    namespace: `/insightarts-page`,
    appName: "v0",
  });
  if (res.code === 2000010000) {
    ElMessage({
      message: "复制成功",
      type: "success",
    });
    location.reload();
  }
};

const onEditName = async (type: any) => {
  if (type === "start") {
    oldname.value = pageName.value;
    editName.value = true;
    if (nameInput.value) {
      nameInput.value.focus();
    }
  }
  if (type === "end") {
    const verify: any = verifyDisplayname();
    if (verify) {
      const res = await apiPage.updatePage({
        info: {
          displayName: pageName.value,
          name: des?.value?.name,
          description: null,
          resourceType: "insightarts-page",
        },
        content: null,
        resourceKey: {
          name: des?.value?.name,
          namespace: `insightarts-page`,
          extension: "json",
        },
        isUpdateIfEmpty: false,
      });
      editName.value = false;
      if (res?.code !== 2000010000) {
        pageName.value = oldname.value;
      }
    } else {
      editName.value = false;
      pageName.value = oldname.value;
    }
  }
};

const verifyDisplayname = () => {
  // let legal = true;
  // let waring;
  // if (!this.pageName) {
  //   waring = `请输入大屏名称`;
  //   legal = false;
  // } else if (this.pageName.length > 64) {
  //   waring = `大屏名称长度不能超过64字符`;
  //   legal = false;
  // } else if (!validRegs.resourceDisplayName.test(this.pageName)) {
  //   waring = "只允许输入中文、英文、数字、下划线、中横线";
  //   legal = false;
  // }
  // if (legal) {
  //   return true;
  // } else {
  //   ElMessage({
  //     type: "warning",
  //     message: waring,
  //   });
  //   return false;
  // }
  return true;
};

const deleteSubmit = async () => {
  deleteDialogVisible.value = true;
  const res: any = await apiPage.deletePage({
    name: des.value.name,
    namespace: `/insightarts-page`,
    version: des.value.version,
    extension: "json",
  });

  if (res) {
    deleteDialogVisible.value = false;
    ElMessage({
      type: "success",
      message: "删除成功!",
    });
    location.reload();
  }
};

const onShareScreen = () => {
  const url = `${window.location.host}/earthEdtitor/#/preview?mode=earth&name=${des.value.name}&token=dXNlcl9pbnNpZ2h0YXJ0cw==`;
  const res = Clipboard.copy(url);
  if (res) {
    ElMessage({
      message: "复制成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "复制失败",
      type: "error",
    });
  }
};
</script>
<style lang="scss" scoped>
.item-container {
  &::before {
    content: "";
    padding-top: 75%;
    float: left;
  }
  &::after {
    content: "";
    display: block;
    clear: both;
  }
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  .item-hover {
    border: 1px solid #0046ff !important;
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.08);
  }
  .item {
    cursor: pointer;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #d3d9e6;
    &:hover {
      border: 1px solid #0046ff;
      box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.08);
    }
    .item-main {
      width: 100%;
      height: calc(100% - 62px);
      background-color: #edf0f2;
      background-repeat: no-repeat;
      background-size: contain;

      background-position: center center;
      position: relative;
      .operation-page {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: space-between;
        .operate-checkbox {
          width: 30px;
          padding: {
            left: 8px;
            top: 8px;
          }
        }
        .operate-button-group {
          display: flex;
          align-items: center;
          justify-content: space-between;
          > button {
            cursor: pointer;
            margin: 8px;
            min-width: 50px;
            height: 32px;
            border-radius: 2px;
            border: 1px solid #d9dbe0;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 16, 47, 0.65);
            &:hover {
              background: #0046ff;
              border-color: #0046ff;
              color: #ffffff;
            }
          }
        }
        .operate-icon-group {
          width: 30px;
          display: flex;
          flex-direction: column;
          float: right;
          color: white;
          > i {
            margin-top: 16px;
            width: 24px;
            height: 24px;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            &:hover {
              background: rgba(0, 0, 0, 0.7);
              color: #0046ff;
            }
          }
        }
      }
    }
    .item-description {
      height: 60px;
      display: flex;
      &-icon {
        padding: 0 14px;
        width: 50px;
      }
      &-info {
        height: 100%;
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        &--name {
          font-size: 14px;
          font-family: MicrosoftYaHei;
          color: #2d374b;
          .showName,
          .inputName {
            height: 100%;
            width: 100%;
            margin: 0;
          }
          .showName {
            height: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .inputName {
            padding-bottom: 4px;
          }
        }
        &--date {
          font-size: 12px;
          font-family: MicrosoftYaHei;
          color: #a6acb6;
        }
      }
    }
  }
}
</style>
